<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>阿里百秀</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
   
    <link rel="stylesheet" href="css/index.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
<style>
   
</style>  
</head>
  <body>
   <div class="container">
       <div class="row">
           <header class="col-md-2">
               <div class="log">
                   <a href="#">
                       <img class="hidden-xs" src="./images/微信截图_20211219214231.png" alt="">
                       <span class="visible-xs">阿里百秀</span>
                   </a>
               </div>
               <div class="nav">
                   <ul>
                       <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                       <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                       <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                       <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                       <li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
                       
                   </ul>
               </div>
           </header>
           <article class="col-md-7">
               <!-- 新闻 -->
               <div class="news clearfix">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./images/u=2631254330,3519837991&fm=26&fmt=auto.jpg" alt="">
                                <p>阿里百秀</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/001.jpg" alt="">
                                <p>一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/src=http___www.2008php.com_2016_Website_appreciate_2016-03-25_20160325183007.jpg&refer=http___www.2008php.jpg" alt="">
                                <p>一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/u=2631254330,3519837991&fm=26&fmt=auto.jpg" alt="">
                                <p>一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./images/00111.jpg" alt="">
                                <p>一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了</p>
                            </a>
                        </li>
                        
                    </ul>
               </div>
               <!-- 发表 -->
               <div class="publish">
                   <div class="row">
                       <div class="col-sm-9">
                           <h3>一般是收费的，但是他们的作者允许 </h3>
                           <p class="text-muted hidden-xs">Bootstrap 免费使用。为了</p>
                           <p>一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许</p>
                           <p class="text-muted hidden-xs">一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许</p>
                       </div>
                       <div class="pic col-sm-3 hidden-xs">
                           <img src="./images/src=http___www.2008php.com_2016_Website_appreciate_2016-03-25_20160325183007.jpg&refer=http___www.2008php.jpg" alt="">
                       </div>
                   </div>
                   <div class="row">
                       <div class="col-sm-9">
                           <h3>一般是收费的，但是他们的作者允许 </h3>
                           <p class="text-muted hidden-xs">Bootstrap 免费使用。为了</p>
                           <p>一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许</p>
                           <p class="text-muted hidden-xs">一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许</p>
                       </div>
                       <div class="pic col-sm-3 hidden-xs">
                           <img src="./images/src=http___www.2008php.com_2016_Website_appreciate_2016-03-25_20160325183007.jpg&refer=http___www.2008php.jpg" alt="">
                       </div>
                   </div>
                   <div class="row">
                       <div class="col-sm-9">
                           <h3>一般是收费的，但是他们的作者允许 </h3>
                           <p class="text-muted hidden-xs">Bootstrap 免费使用。为了</p>
                           <p>一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许</p>
                           <p class="text-muted hidden-xs">一般是收费的，但是他们的作者允许一般是收费的，但是他们的作者允许</p>
                       </div>
                       <div class="pic col-sm-3 hidden-xs">
                           <img src="./images/src=http___www.2008php.com_2016_Website_appreciate_2016-03-25_20160325183007.jpg&refer=http___www.2008php.jpg" alt="">
                       </div>
                   </div>
               
               </div>
           </article>
           <aside class="col-md-3">
               <a href="" class="banner">
                   <img src="./images/u=2631254330,3519837991&fm=26&fmt=auto.jpg" alt="">
               </a>
               <a href="" class="hot">
                   <span class="btn btn-primary">热搜</span>
                   <h4 class="text-primary">
                    一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了
                   </h4>
                   <p>
                    一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了
                   </p>
               </a>
           </aside>
       </div>
     
   </div>















    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>